<template>
	<view class="container">
		<view class="content">
			<view class="adContainer">
				<ad unit-id="adunit-f34d221d9106844b"></ad>
			</view>
			<view class="lineC">
				<image class="line_left"
					src="https://upload-images.jianshu.io/upload_images/668798-207c5b9a79d98c06.png"></image>
				<view class="desc">新年祝福</view>
				<image class="line_right"
					src="https://upload-images.jianshu.io/upload_images/668798-207c5b9a79d98c06.png"></image>
			</view>
			<view class="cellContent">
				<view class="cell" :key="index" v-for="(item, index) in list" @click="clickSourceCell(index)">
					<view class="cell_stack">
						<image class="cell_box" mode="aspectFill"
							src="https://upload-images.jianshu.io/upload_images/668798-7922982650d84a54.png"></image>
						<view class="cell_boxC1" :class="{ran: true}">
							<image class="cell_box1" mode="aspectFill"
								src="https://upload-images.jianshu.io/upload_images/668798-3dc677daa8c7d2ae.png">
							</image>
						</view>
						<image class="cell_img" mode="aspectFill" :src="item.bgImage"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import libData from "@/data/newyearData.js"
	import functionTool from "@/data/function.js"
	
	export default {
		onShareAppMessage() {
			return functionTool.defaultShare()
		},
		onShareTimeline() {
			return functionTool.defaultShare()
		},
		data() {
			return {
				list: [],
				zodiacIndex: 0 // 点击的哪个属相
			}
		},
		onLoad(options) {
			this.zodiacIndex = options.index
			var zodialDic = libData.chineseZodiacList[this.zodiacIndex]
			this.list = zodialDic.blessList
			var naviTitle = zodialDic.title
			uni.setNavigationBarTitle({
				title: naviTitle + '年祝福'
			});
		},
		methods: {
			clickSourceCell(index) {
				uni.navigateTo({
					url: './newyeardetail' + '?index=' + index + '&zodiacIndex=' + this.zodiacIndex
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;

		.content {
			display: flex;
			flex-direction: column;

			.adContainer {
				background-color: #FFFFFF;
			}

			.lineC {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				margin-top: 40rpx;
				margin-bottom: 40rpx;

				.line_left {
					height: 60rpx;
				}

				.line_right {
					height: 60rpx;
				}

				.desc {
					text-align: center;
					width: 450rpx;
					font-size: 40rpx;
					color: #f21313;
					font-weight: bold;
				}
			}

			.cellContent {
				display: flex;
				flex-flow: wrap;

				.cell {
					display: flex;
					flex-direction: column;
					margin-left: 50rpx;
					margin-bottom: 20rpx;
					width: 300rpx;
					height: 300rpx;

					.cell_stack {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.cell_box {
							border-radius: 20rpx;
							position: absolute;
							z-index: 2;
							height: 260rpx;
							width: 260rpx;
						}

						.cell_boxC1 {
							border-radius: 20rpx;
							position: absolute;
							z-index: 2;
							height: 300rpx;
							width: 300rpx;

							.cell_box1 {
								height: 100%;
								width: 100%;
							}
						}

						.ran {
							image {
								animation: turn 30s linear infinite;
							}
						}

						@keyframes turn {
							0% {
								-webkit-transform: scale(0deg);
							}

							25% {
								-webkit-transform: rotate(90deg);
							}

							50% {
								-webkit-transform: rotate(180deg);
							}

							75% {
								-webkit-transform: rotate(270deg);
							}

							100% {
								-webkit-transform: rotate(360deg);
							}
						}

						.cell_img {
							border-radius: 20rpx;
							height: 260rpx;
							width: 260rpx;
						}
					}
				}
			}
		}
	}
</style>
